<template>
  <t-form-item  :name="name"  :class="{'form-item-full-width': fullWidth,'form-item-width-2x': width2x, 'custom-form-item': true, 'custom-form-item-disabled': disabled, 'custom-form-item-append-btn': appendBtn}">

    <template #label>
      <span  v-if="strings.isBlank(helpTip)">{{label}}</span>
      <t-tooltip v-if="strings.isNotBlank(helpTip)">
        <span>{{label}}</span>
        <div slot="content" v-html="helpTip"></div>
      </t-tooltip>
    </template>
    <template #help>
      <span v-html="helpBottom" v-if="helpBottom"  style="color: #82848a"></span>
    </template>
    <!--静态文本-->
    <t-tooltip trigger="hover" v-if="cpTxtShow || constCommon.formItemType.staticHtml.name == type" >
      <template #content>
        <span v-html="cpTxt"></span>
      </template>
      <div v-html="cpTxt"  :class="{'form-item-control': !heightAuto}"/>
    </t-tooltip>

    <!--文本框-->
    <customInput
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      @focus="_focus"
      @change="_change"
      :suffixIcon="showSelectIcon ? 'unfold-more' : ''"
      v-else-if="constCommon.formItemType.inputText.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      class="form-item-control"
    />

    <!--文本域-->
    <customTextarea
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      @focus="_focus"
      @change="_change"
      v-else-if="constCommon.formItemType.textarea.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      class="form-item-control"
    />

    <!--数字框-->
    <customInputNumber
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      v-else-if="constCommon.formItemType.inputNumber.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
    />

    <!--开关-->
    <customSwitch
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      v-else-if="constCommon.formItemType.switch.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
    />

    <!--复选框-->
    <customCheckbox
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      v-else-if="constCommon.formItemType.checkbox.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
    />

    <!--单选框-->
    <customRadio
      :parent="_self"
      :form="form"
      :help="help"
      :readonly="readonly"
      :disabled="disabled"
      v-else-if="constCommon.formItemType.radio.name == type"
      v-bind="cpConfig"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
    />

    <!--下拉框-静态 或者 从数据字典获取-->
    <customSelect
      :parent="_self"
      :form="form"
      :help="help"
      v-bind="cpConfig"
      v-else-if="constCommon.formItemType.selectStatic.name == type || constCommon.formItemType.selectDict.name == type"
      ref="formItemControl"
      @change="_change"
      :disabled="disabled"
      :clearable="clearable"
      class="form-item-control"
    />

    <!--日期组件-->
    <customDatePicker
      :parent="_self"
      :form="form"
      v-bind="cpConfig"
      :disabled="disabled"
      :mode="mode"
      v-else-if="constCommon.formItemType.datePicker.name == type"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
      :help="help"
    />

    <!--日期组件 区间-->
    <customDatePickerRange
      :parent="_self"
      :form="form"
      v-bind="cpConfig"
      :disabled="disabled"
      v-else-if="constCommon.formItemType.datePickerRange.name == type"
      ref="formItemControl"
      @change="_change"
      class="form-item-control"
      :help="help"
    />

    <!--自定义插槽-->
    <slot name="content" v-else   class="form-item-control" ref="formItemControl">
    </slot>

    <!--追加按钮-->
    <slot name="appendBtn" ref="formItemAppend"   class="form-item-append-btn"></slot>
  </t-form-item>
</template>

<script>

export default {
  desc: '自定义表单项',
  name: 'customFormItem',
  props: {
    /**
     * @Description：显示与校验名称
     * @Date 2023-10-10
     */
    name: {
      required: true,
      type: String,
      default: () => '名称'
    },
    /**
     * @Description：标题
     * @Date 2023-10-10
     */
    label: {
      required: true,
      type: String,
      default: () => '表单项'
    },
    /**
     * @Description：上级页面对象
     * @Date 2023-10-10
     */
    parent: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：上级表单对象
     * @Date 2023-10-10
     */
    form: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：控件类型，取自 constCommon.formItemType
     * @Date 2023-10-10
     */
    type: {
      type: String,
      default: () => {
        return global.constCommon.formItemType.inputText.name
      }
    },
    /**
     * @Description：输入提示信息
     * @Date 2023-10-10
     */
    help: {
      type: String,
      default: () => null
    },
    /**
     * @Description：只读
     * @Date 2023-10-10
     */
    readonly: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：禁用
     * @Date 2023-10-10
     */
    disabled: {
      type: Boolean,
      default: () => false
    },
     /**
     * @Description：选择器模式
     * @Date 2023-10-10
     */
     mode: {
      type: String,
      default: () => 'date'
    },
     /**
     * @Clearable：清空
     * @Date 2024-03-27
     */
     clearable: {
      type: Boolean,
      default: () => true
    },
    /**
     * @Description：显示可选操作图标，true: 右侧追加 unfold-more图标
     * @Date 2023-10-10
     */
    showSelectIcon: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：其他的配置项
     * @Date 2023-10-10
     */
    config: {
      type: Object,
      default: () => { return {} }
    },
    /**
     * @Description：宽度占满
     * @Date 2023-10-10
     */
    fullWidth: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 自动聚焦
     * @Date 2023-10-10
     */
    autoFocus: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 追加按钮
     * @Date 2023-10-10
     */
    appendBtn: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 2倍宽度
     * @Date 2023-10-10
     */
    width2x: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：输入提示信息  固定显示到表单项下面
     * @Date 2023-10-10
     */
    helpBottom: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：输入提示信息  表单项标题悬浮显示
     * @Date 2023-10-10
     */
    helpTip: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：true 自动高度
     * @Date 2023-10-10
     */
    heightAuto: {
      type: Boolean,
      default: () => false
    },
  },
  mounted() {
    if (this.autoFocus) {
      setTimeout(() => {
        if (this.getControl() && this.getControl().focus) {
          this.getControl().focus()
        }
      }, 500)
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 聚焦 调用父组件
    _focus() {
      this.$emit('focus')
    },
    // 组件实例
    getControl() {
      return this.$refs.formItemControl
    },

    // 聚焦 调用本组件
    focus() {
      if (this.getControl() && this.getControl().focus) {
        setTimeout(() => {
          this.getControl().focus()
        }, 500)
      }
      this.$emit('focusTo')
    },

    // 改变事件回调
    _change(valueThis, selectItem) {
      this.$emit('change', valueThis, selectItem)
    }
  },
  watch: {
  },
  computed: {
    // 静态文本
    cpTxt() {
      if (!this.name || !this.form) {
        return ''
      }
      let value = this.form[this.name]
      value = this.strings.defaultIfBlank(value, this.cpConfig.defaultValue)

      if (this.strings.isBlank(value)
        && this.constCommon.formItemType.selectDict.name != this.type
        && this.constCommon.formItemType.selectStatic.name != this.type
      ) {
        value = this.cpConfig.value
      }
      // 根据字典格式化
      if (this.cpConfig.dictType) {
        let valueNew = this.utils.getDictLabel(value + '', this.cpConfig.dictType, this.cpConfig.defaultValue, true)
        if (this.strings.isNotBlank(valueNew)) {
          value = valueNew
        }
      }

      if (this.constCommon.formItemType.switch.name == this.type) {
        if (this.constCommon.trueValueList.includes(value)) {
          value = '<span style="color: green">是</span>'
        } else {
          value = '<span style="color: red">否</span>'
        }
      } else  if (this.constCommon.formItemType.datePicker.name == this.type) {
        if (this.cpConfig['enable-time-picker']) {
          value = this.dates.toDate(value, 'yyyy-MM-dd HH:mm:ss')
        } else {
          value = this.dates.toDate(value)
        }

      } else  if (this.constCommon.formItemType.radio.name == this.type) {
       let findIndex =  this.cpConfig.options.findIndex(item => item.value == value)
        if (findIndex != -1) {
          value = this.cpConfig.options[findIndex].label
        }
      } else  if (this.constCommon.formItemType.selectStatic.name == this.type) {
       let findIndex =  this.cpConfig.options.findIndex(item => item.value == value)
        if (findIndex != -1) {
          value = this.cpConfig.options[findIndex].label
        }
      }

      return value
    },

    // 获取配置
    cpConfig() {
      let config = this.config
      // 有选择图标没有提示信息，显示默认提示信息
      if (this.showSelectIcon && !this.placeholder) {
        config.placeholder = '请选择'
      }

      // 数据字典
      if (this.constCommon.formItemType.selectDict.name == this.type) {
        config.options = this.utils.getDictDataList(config.dictType)
      }
      return config
    },

    // 是否显示静态文本
    cpTxtShow() {
      if (this.constCommon.formItemType.slot.name == this.type) {
        return false
      }
      if (this.$parent && this.$parent._props && this.$parent._props.disabled != undefined && this.$parent._props.disabled) {
        return true
      }
      return this.disabled
    },
  }
}
</script>

<style lang="scss">
  /*禁用后隐藏左侧必填项*/
  .custom-form-item-disabled{
    .t-form__label--required label::before{
      content: '' !important;
    }
  }
  .custom-form-item-append-btn{
    .form-item-append-btn{
      width: 40px;
    }
    .t-input__extra{
      right:  60px !important;
    }
  }

  .form-item-control{
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis; /*以省略号...显示*/
    white-space: nowrap; /*强制不换行*/
  }

</style>
